<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>

</head>
<!--
1.自定义全局指令实现文本框获取焦点
2.和js行为相关的最好放在insert中，，防止行为失效，和样式相关的放在bind里就可以
3.bug1:自定义私有指令时，new Vue里面是directives,有s,
4，bug2:指令名称color要加引号
-->

<body>
    <div id="a">
        <div>
            自定义指令获取焦点:<input type="text" v-focus>
        </div>
        <div>
            自定义指令定义输入文本框文字的颜色:<input type="text" v-color>
        </div>
        <div>
            自定义指令定义输入文本框文字的颜色，传参:<input type="text" v-color2="'pink'">
        </div>
        <div>
            以上都是全局的，现定义私有的，传参<input type="text" v-color3="'pink'">
        </div>
        <div>
            自定义指令简写（在bind和update里面各写了一份）：传参，私有<input type="text" v-color4="'pink'">
        </div>

    </div>
    <script>
        Vue.directive('focus', {
            bind: function(el) {},
            inserted: function(el) {
                el.focus();

            },
            updated: function(el) {}
        })
        Vue.directive('color', {
            bind: function(el) {
                el.style.color = 'red';
            },
            inserted: function(el) {},
            updated: function(el) {}
        })
        Vue.directive('color2', {
            bind: function(el, binding) {
                el.style.color = binding.value;
            },
            inserted: function(el) {


            },
            updated: function(el) {}
        })
        new Vue({
            el: '#a ',
            data: {
                id: ''
            },
            directives: {
                'color3': {
                    bind: function(el, binding) {
                        el.style.color = binding.value;
                    }

                },
                'color4': function(el, binding) {
                    el.style.color = binding.value;
                }

            }

        })
    </script>
</body>

</html>